<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="90px">
			<el-form-item label="订单编号:" prop="orderSn">
				<el-input v-model.trim="queryParams.orderSn" clearable placeholder="请输入订单编号" show-word-limit />
			</el-form-item>
			<el-form-item label="商品ID:" prop="goodsId">
				<el-input v-model.trim="queryParams.goodsId" clearable placeholder="请输入商品ID" show-word-limit />
			</el-form-item>
			<el-form-item label="商品名称:" prop="goodsName">
				<el-input v-model.trim="queryParams.goodsName" clearable placeholder="请输入商品名称" show-word-limit />
			</el-form-item>
			<el-form-item label="商家ID:" prop="supplierUuid">
				<el-input v-model.trim="queryParams.supplierUuid" clearable placeholder="请输入商家ID" show-word-limit />
			</el-form-item>
			<el-form-item label="商家名称:" prop="username">
				<el-input v-model.trim="queryParams.username" clearable placeholder="请输入供应商名称" show-word-limit />
			</el-form-item>
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" clearable placeholder="请输入用户ID" show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" clearable placeholder="请输入手机号码" show-word-limit />
			</el-form-item>
			<el-form-item label="订单状态:" prop="orderStatus">
				<el-select v-model="queryParams.orderStatus" clearable placeholder="请选择订单状态">
					<el-option v-for="item in orderOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="创建时间:"></start-end-time>
		</el-form>

		<div slot="card" class="mb-[24px] flex items-center">
			<el-button type="primary" class="w-[150px] !h-[70px]">
				<div class="num">{{ statistics.orderTotal }}</div>
				<div class="mt-[5px] text">全部订单</div>
			</el-button>
			<el-button type="primary" class="w-[150px] !h-[70px]">
				<div class="num">{{ statistics.overMoney }}</div>
				<div class="mt-[5px] text">实付总消费券</div>
			</el-button>
			<el-button type="primary" class="w-[150px] !h-[70px]">
				<div class="num">{{ statistics.overSupply }}</div>
				<div class="mt-[5px] text">供应总金额</div>
			</el-button>
		</div>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
		</template>
		<el-table v-loading="loading" :data="orderList" stripe @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="55"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="订单编号" min-width="156" prop="orderSn" />
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" min-width="120" prop="userPhone" />
			<el-table-column :formatter="emptyToString" align="center" label="商家ID" prop="supplierUuid" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商家名称" prop="username" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="name" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<div class="goods-name-style">
						{{ scope.row.goodsName }}
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="规格" prop="attribute" min-width="120" />
			<!--			<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">-->
			<!--				<template slot-scope="scope">-->
			<!--					<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>-->
			<!--				</template>-->
			<!--			</el-table-column>-->
			<el-table-column :formatter="emptyToNumber" align="center" label="数量" prop="goodsNum" min-width="120" />
			<el-table-column :formatter="emptyToNumber" align="center" label="实付消费券" prop="actualPrice" min-width="120" />
			<el-table-column :formatter="emptyToNumber" align="center" label="供应价" prop="supplyPrice" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="订单状态" prop="orderStatusDesc" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="售后状态" prop="aftersaleStatus" min-width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.aftersaleStatus === 0">无售后</span>
					<span v-else-if="scope.row.aftersaleStatus === 1">已申请</span>
					<span v-else-if="scope.row.aftersaleStatus === 2">待买家处理</span>
					<span v-else-if="scope.row.aftersaleStatus === 3">退款成功</span>
					<span v-else-if="scope.row.aftersaleStatus === 4">审核拒绝</span>
					<span v-else-if="scope.row.aftersaleStatus === 5">用户已取消</span>
					<span v-else-if="scope.row.aftersaleStatus === 8">退款退货中</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="备注" min-width="120">
				<template slot-scope="scope">
					<div class="multi-line" style="min-width: 100px" v-text="scope.row.message || '-'"></div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" :width="153" align="center" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-end items-center">
						<el-button v-if="!scope.row.shipSn && scope.row.orderStatusDesc === '待发货'" v-hasPermi="['mall:order:edit']" type="primary" @click="handleUpdate(scope.row.id, scope.row.orderGoodsId)"
							>发货
						</el-button>
						<el-button v-hasPermi="['mall:order:list']" type="primary" @click="showDetails(scope.row.id, 2, scope.row.orderGoodsId)">详情 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<l-dialog v-model="open" ok-button-text="发货" title="订单发货" width="567px" @close="cancel" @formClose="cancel" @formSubmit="submitForm">
			<div v-for="(item, index) in form.goodsInfo" :key="index" class="border-das pl-[78px] pr-[45px] py-[17px] flex items-center mb-[27px]">
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="flex items-center mb-[10px]">商品ID：{{ item.goodsId }}</div>
					</el-col>
					<el-col :span="12">
						<div class="flex items-center mb-[10px]">供应商名称：{{ item.supplierName }}</div>
					</el-col>
					<el-col :span="12">
						<div class="flex items-center mb-[10px]" style="color: var(--primary-color)">商品名称：{{ item.goodsName }}</div>
					</el-col>
					<el-col :span="12">
						<div class="flex items-center mb-[10px]">供应商电话：{{ item.supplierPhone }}</div>
					</el-col>
					<el-col :span="24">
						<div class="flex items-center mb-[10px]">规格：{{ item.attribute }}</div>
					</el-col>
					<el-col :span="24">
						<div class="flex items-center">数量：{{ item.goodsNum }}</div>
					</el-col>
				</el-row>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="订单编号:">
					<el-input v-model.trim="form.orderSn" class="!w-full !max-w-full"></el-input>
				</el-form-item>
				<el-form-item label="收件人:">
					<el-input v-model.trim="form.consignee" class="!w-full !max-w-full"></el-input>
				</el-form-item>
				<el-form-item label="收件人电话:">
					<el-input v-model.trim="form.mobile" class="!w-full !max-w-full"></el-input>
				</el-form-item>
				<el-form-item label="地址:">
					<el-input v-model.trim="form.address" class="!w-full !max-w-full"></el-input>
				</el-form-item>
				<el-form-item label="快递单号:" prop="shipSn">
					<el-input v-model.trim="form.shipSn" placeholder="请输入快递单号" class="!w-full !max-w-full"></el-input>
				</el-form-item>
				<el-form-item label="快递公司:" prop="shipChannel">
					<el-input v-model.trim="form.shipChannel" placeholder="请输入快递公司名称" class="!w-full !max-w-full"></el-input>
				</el-form-item>
			</el-form>
		</l-dialog>
		<l-dialog v-model="openDetails" :show-button="false" title="订单详情" width="1201px" @close="handleClose">
			<div class="h-[137px] bg-[#F7F7F7] py-[23px] mb-[20px] flex items-center justify-center steps">
				<el-steps v-if="orderDetails.orderDetail.orderStatus === '待支付' || orderDetails.orderDetail.orderStatus === '取消支付'" :active="1" align-center class="flex-1">
					<el-step title="提交订单" :description="orderDetails.orderDetail.createTime"></el-step>
					<el-step title="付款成功"></el-step>
					<el-step title="已发货"></el-step>
					<el-step title="确认收货"></el-step>
					<el-step title="订单完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.orderStatus === '待发货' || orderDetails.orderDetail.orderStatus === '拼单中'" :active="2" align-center class="flex-1">
					<el-step title="提交订单" :description="orderDetails.orderDetail.createTime"></el-step>
					<el-step title="付款成功" :description="orderDetails.orderDetail.payTime"></el-step>
					<el-step title="已发货"></el-step>
					<el-step title="确认收货"></el-step>
					<el-step title="订单完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.orderStatus === '待收货'" :active="3" align-center class="flex-1">
					<el-step title="提交订单" :description="orderDetails.orderDetail.createTime"></el-step>
					<el-step title="付款成功" :description="orderDetails.orderDetail.payTime"></el-step>
					<el-step title="已发货" :description="orderDetails.goodsInfo[0].shipTime"></el-step>
					<el-step title="确认收货"></el-step>
					<el-step title="订单完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.orderStatus === '完成' || orderDetails.orderDetail.orderStatus === '待评价'" :active="5" align-center class="flex-1">
					<el-step title="提交订单" :description="orderDetails.orderDetail.createTime"></el-step>
					<el-step title="付款成功" :description="orderDetails.orderDetail.payTime"></el-step>
					<el-step title="已发货" :description="orderDetails.goodsInfo[0].shipTime"></el-step>
					<el-step title="确认收货" :description="orderDetails.goodsInfo[0].confirmTime"></el-step>
					<el-step title="订单完成" :description="orderDetails.orderDetail.updateTime"></el-step>
				</el-steps>
			</div>
			<div class="border-das pl-[26px] py-[23px] mb-[14px]">
				<template v-if="orderDetails.orderDetail.orderStatus === '待支付'">
					<div class="text-[#F14A46]">订单状态：待付款</div>
					<div class="text-[#F14A46] flex w-full items-center">
						<el-statistic
							format="HH时mm分ss秒"
							:value-style="{ fontSize: '14px', color: '#F14A46' }"
							class="statistic"
							:value="dayjs().valueOf() + dayjs(orderDetails.orderDetail.endTime).valueOf() - +dayjs().valueOf()"
							time-indices
						>
							<div slot="prefix" class="text-[#F14A46]">剩余支付时间：</div>
						</el-statistic>
					</div>
				</template>
				<template v-if="orderDetails.orderDetail.orderStatus === '待发货' || orderDetails.orderDetail.orderStatus === '拼单中'">
					<div class="text-[#F14A46]">订单状态：待发货</div>
				</template>
				<template v-if="orderDetails.orderDetail.orderStatus === '已发货' || orderDetails.orderDetail.orderStatus === '待收货'">
					<div class="text-[#F14A46]">订单状态：待收货</div>
				</template>
				<template v-if="orderDetails.orderDetail.orderStatus === '完成'">
					<div class="text-[#F14A46]">订单状态：已完成</div>
				</template>
				<template v-if="orderDetails.orderDetail.orderStatus === '待评价'">
					<div class="text-[#F14A46]">订单状态：待评价</div>
				</template>
				<template v-if="orderDetails.orderDetail.orderStatus === '取消支付'">
					<div class="text-[#F14A46]">订单状态：已取消</div>
				</template>
			</div>
			<div v-if="!only" class="content">
				<div class="title font-bold mb-[13px]">订单信息</div>
				<el-table stripe :data="[orderDetails.orderDetail]">
					<el-table-column prop="orderSn" :formatter="emptyToString" label="订单编号" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<!-- <el-table-column prop="payType" :formatter="emptyToString" label="支付方式" min-width="120" show-overflow-tooltip align="center"></el-table-column> -->
					<el-table-column prop="generateTime" :formatter="emptyToString" label="下单时间" min-width="156" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="orderStatus" :formatter="emptyToString" label="订单状态" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<!-- <el-table-column prop="afterSaleStatus" :formatter="emptyToString" label="售后状态" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.afterSaleStatus === 0">无售后</span>
							<span v-else-if="scope.row.afterSaleStatus === 1">已申请</span>
							<span v-else-if="scope.row.afterSaleStatus === 2">待买家处理</span>
							<span v-else-if="scope.row.afterSaleStatus === 3">退款成功</span>
							<span v-else-if="scope.row.afterSaleStatus === 4">审核拒绝</span>
							<span v-else-if="scope.row.afterSaleStatus === 5">用户已取消</span>
							<span v-else-if="scope.row.afterSaleStatus === 8">退款退货中</span>
							<span v-else>-</span>
						</template>
					</el-table-column> -->
					<el-table-column prop="payAmount" :formatter="emptyToString" label="订单消费券" min-width="120" show-overflow-tooltip align="center"> </el-table-column>
					<el-table-column prop="supplyPrice" :formatter="emptyToString" label="供应价格" min-width="120" show-overflow-tooltip align="center"> </el-table-column>
					<el-table-column prop="remark" :formatter="emptyToString" label="备注" min-width="120" show-overflow-tooltip align="center"></el-table-column>
				</el-table>
			</div>
			<div v-if="!only" class="content">
				<div class="title font-bold mb-[13px]">商品信息</div>
				<el-table stripe :data="orderDetails.goodsInfo">
					<el-table-column prop="goodsId" :formatter="emptyToString" label="商品ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="goodsId" :formatter="emptyToString" label="商品分类" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							{{ scope.row.topCategory + ' > ' + scope.row.category }}
						</template>
					</el-table-column>
					<el-table-column prop="id" :formatter="emptyToString" label="商家ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>

					<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goods_name" show-overflow-tooltip width="150">
						<template slot-scope="scope">
							<div class="goods-name-style" style="color: var(--primary-color)">
								{{ scope.row.goodsName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
						<template slot-scope="scope">
							<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToNumber" align="center" label="数量" prop="goodsNum" min-width="120" />

					<!-- <el-table-column :formatter="emptyToString" align="center" label="商品类型" prop="orderType" min-width="120" /> -->
					<el-table-column v-if="supplier == 1" :formatter="emptyToString" align="center" label="商家名称" prop="supplierName" min-width="120" />
					<el-table-column v-else-if="store == 1" :formatter="emptyToString" align="center" label="商家名称" prop="storeName" min-width="120" />
					<el-table-column v-else-if="chain == 1" :formatter="emptyToString" align="center" label="商家名称" prop="chainName" min-width="120" />
					<el-table-column v-else :formatter="emptyToString" align="center" label="商家名称" prop="chainName" min-width="120"> <template slot-scope="scope"> 平台 </template></el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品规格" prop="attribute" min-width="120" />
					<!-- <el-table-column :formatter="emptyToNumber" align="center" label="货款（元）" prop="supplyPrice" min-width="120" /> -->
					<!-- <el-table-column :formatter="emptyToNumber" align="center" label="优惠金额（元）" prop="couponPrice" min-width="120" /> -->
					<!-- <el-table-column :formatter="emptyToNumber" align="center" label="折扣金额（元）" prop="memberPrice" min-width="120" /> -->
					<!-- <el-table-column :formatter="emptyToNumber" align="center" label="实付金额（元）" prop="actualPrice" min-width="120" /> -->
					<!-- <el-table-column :formatter="emptyToNumber" align="center" label="支付积分" prop="deductPrice" min-width="120" /> -->
				</el-table>
			</div>
			<div v-if="!only" class="content">
				<div class="title font-bold mb-[13px]">用户信息</div>
				<el-table stripe :data="[orderDetails.userInfo]">
					<el-table-column prop="uuid" :formatter="emptyToString" label="用户ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="consigneePhone" :formatter="emptyToString" label="手机号码" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="consignee" :formatter="emptyToString" label="收件人" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="nickName" :formatter="emptyToString" label="用户昵称" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="userPhone" :formatter="emptyToString" label="收件人手机号码" min-width="156" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="address" :formatter="emptyToString" label="收货地址" min-width="120" show-overflow-tooltip align="center"></el-table-column>
				</el-table>
			</div>
			<div
				v-if="
					(orderDetails.orderDetail.orderStatus === '已发货' ||
						orderDetails.orderDetail.orderStatus === '待收货' ||
						orderDetails.orderDetail.orderStatus === '完成' ||
						orderDetails.orderDetail.orderStatus === '待评价') &&
					orderDetails.logisticsInfo &&
					orderDetails.logisticsInfo.result
				"
				class="material"
			>
				<!-- <div class="material-title">物流信息</div>
				<div v-if="orderDetails.logisticsInfo" class="material-info">
					<span>快递公司：{{ orderDetails.logisticsInfo.result.expName }}</span>
					<span>物流编号：{{ orderDetails.logisticsInfo.result.number }}</span>
				</div>
				<div v-if="orderDetails.logisticsInfo" class="material-timeline">
					<el-timeline>
						<el-timeline-item v-for="(item, index) in orderDetails.logisticsInfo.result.list" :key="index" placement="top">
							<el-card shadow="never" :body-style="{ padding: '15px 10px' }">
								<h4>{{ item.status }}</h4>
								<div class="time">{{ item.time }}</div>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div> -->
			</div>
		</l-dialog>
	</l-page>
</template>

<script>
import { delOrder, getOrderDetails, goShip, listOrder } from '@/api/mall/order';
import Editor from '@/components/Editor';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
import TemplateZone from '@/views/mall/logistics/templateZone';

export default {
	name: 'Order',
	components: {
		TemplateZone,
		Editor,
		startEndTime,
	},
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 订单表格数据
			orderList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			openDetails: false,
			tableAction: 100,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				uuid: null,
				userId: null,
				orderSn: null,
				orderStatus: null,
				goodsId: null,
				goodsName: null,
				aftersaleStatus: null,
				username: null,
				consignee: null,
				mobile: null,
				address: null,
				payType: null,
				message: null,
				goodsPrice: null,
				freightPrice: null,
				couponPrice: null,
				integralPrice: null,
				grouponPrice: null,
				orderPrice: null,
				actualPrice: null,
				payId: null,
				payTime: null,
				shipSn: null,
				shipChannel: null,
				shipTime: null,
				refundAmount: null,
				refundType: null,
				refundContent: null,
				refundTime: null,
				confirmTime: null,
				comments: null,
				endTime: null,
				productName: null,
				paymentStatus: null,
				creationTime: null,
				orderType: '商城订单',
				date: [],
				type: 0,
				supplierUuid: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				shipSn: [{ required: true, message: '快递编号不能为空', trigger: 'blur' }],
				shipChannel: [{ required: true, message: '快递公司不能为空', trigger: 'blur' }],
			},
			orderData: {},
			orderOptions: [
				{ label: '全部', value: null },
				{ label: '待支付', value: '待支付' },
				{ label: '待发货', value: '待发货' },
				// { label: '待评价', value: '待评价' },
				{ label: '取消支付', value: '取消支付' },
				{ label: '待收货', value: '待收货' },
				{ label: '已完成', value: '完成' },
				// { label: '已售后', value: '售后完成' },
			],
			afterOptions: [
				{ label: '全部', value: null },
				// { label: '无售后', value: 0 },
				// { label: '已申请', value: 1 },
				// { label: '待买家处理', value: 2 },
				{ label: '申请退款', value: 1 },
				{ label: '退款成功', value: 3 },
				{ label: '退款失败', value: 4 },
				// { label: '用户已取消', value: 5 },
				// { label: '退款退货中', value: 8 },
			],
			orderOptions2: [
				{ label: '全部', value: null },
				{ label: '商城订单', value: '商城订单' },
				{ label: '积分订单', value: '积分订单' },
				{ label: '秒杀订单', value: '秒杀' },
				{ label: '砍价订单', value: '砍价' },
				{ label: '拼团订单', value: '拼团' },
			],
			payTyperOptions: [
				{ label: '全部', value: null },
				{ label: '微信支付', value: '微信支付' },
				{ label: '支付宝支付', value: '支付宝支付' },
				{ label: '余额支付', value: '余额支付' },
				{ label: '快捷支付', value: '快捷支付' },
				{ label: '积分支付', value: '积分支付' },
			],
			payOptions: [],
			logisticsInfo: {},
			orderDetails: {
				aftersaleInfo: {},
				goodsInfo: {},
				logisticsInfo: {},
				orderDetail: {},
				userInfo: {},
			},
			only: false,
			statistics: {
				todayOverMoney: 0,
				waitPayMoney: 0,
				todayWaitPayMoney: 0,
				waitDeliverMoney: 0,
				todayWaitDeliverMoney: 0,
				waitReceiveMoney: 0,
				todayWaitReceiveMoney: 0,
				cancelMoney: 0,
				todayCancelMoney: 0,
				overSupply: 0, // 供应总价,
				orderTotal: 0, //订单总数,
				overMoney: 0, //订单金额
			},
		};
	},
	created() {
		this.getList();
		this.getStatistics();
	},
	methods: {
		getStatistics() {
			this.$request.post('/mall/order/orderStatistics1', { orderType: 1 }).then((res) => {
				this.statistics = res.data;
			});
		},
		/** 搜索订单列表 */
		getList() {
			this.loading = true;
			listOrder(this.queryParams)
				.then((response) => {
					this.orderList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleClose() {
			this.openDetails = false;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		//获取时间
		getTime(startTime, endTime) {
			this.queryParams.beginTime = startTime;
			this.queryParams.endTimes = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime();
			this.$refs.queryForm.resetFields();
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加订单';
		},
		showDetails(id, type, orderGoodsId) {
			getOrderDetails(id, orderGoodsId).then((response) => {
				this.orderDetails = response.data;
				// if(response.data.logisticsInfo ){
				//   response.data.logisticsInfo.result.list =  response.data.logisticsInfo.result.list.reverse()
				// }
				if (response.data.logisticsInfo) {
					this.logisticsInfo = response.data.logisticsInfo.result;
				}

				if (type == 1) {
					this.only = true;
				} else {
					this.only = false;
				}
				this.openDetails = true;
			});
		},
		/** 编辑按钮操作 */
		handleUpdate(id, orderGoodsId) {
			getOrderDetails(id, orderGoodsId).then((response) => {
				let data = response.data;
				this.form = {
					orderSn: data.orderDetail.orderSn,
					mobile: data.userInfo.consigneePhone,
					consignee: data.userInfo.consignee,
					address: data.userInfo.address,
					id: id,
					orderGoodsId: orderGoodsId,
					goodsInfo: data.goodsInfo,
				};
				this.open = true;
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					goShip({
						id: this.form.id,
						shipChannel: this.form.shipChannel,
						shipSn: this.form.shipSn,
						orderGoodsId: this.form.orderGoodsId,
						mobile: this.form.mobile,
						consignee: this.form.consignee,
						address: this.form.address,
					}).then((res) => {
						this.msgSuccess('发货成功!');
						this.open = false;
						this.getList();
						this.getStatistics();
					});
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除订单编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delOrder(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download3('/mall/order/export', { ...this.queryParams }, `订单列表${new Date().getTime()}.xlsx`);
		},
	},
};
</script>
<style lang="scss" scoped>
.statistic {
	::v-deep {
		.con {
			justify-content: flex-start;
		}
	}
}

.steps {
	::v-deep {
		.el-step.is-horizontal .el-step__line {
			top: 22px;
			background-color: rgba(112, 112, 112, 0.2);
			height: 1px;
		}
		.el-step__icon {
			width: 46px;
			height: 46px;
			border: 1px solid;
		}
		.is-finish {
			.el-step__icon {
				background: var(--primary-color);
				color: #fff;
				font-size: 12px;
			}
		}
		.el-step__title.is-wait {
			border-color: #999999;
			color: #999999;
		}
		.is-process {
			border-color: #999999;
			color: #999999;
			font-weight: normal;
			.el-step__icon {
				font-size: 12px;
			}
		}
	}
}

.material {
	::v-deep {
		.el-timeline-item__node--normal {
			&:before {
				content: '';
				background: url('~@/assets/images/che.png') no-repeat;
				background-size: 100% 100% !important;
				width: 12px;
				height: 10px;
			}
		}
	}
	&-title {
		font-weight: bold;
		color: #333333;
		font-size: 14px;
		margin-bottom: 17px;
	}
	&-info {
		display: flex;
		align-items: center;
		margin-bottom: 11px;
		span {
			font-size: 12px;
			font-weight: 400;
			color: #333333;
			margin-right: 45px;
		}
	}
	&-timeline {
		padding-top: 20px;
		width: 400px;
		.el-card {
			border: none;
			background-color: #f5f5f5;
		}
		h4 {
			font-size: 12px;
		}
		.time {
			font-size: 12px;
			color: #76cebd;
			margin-top: 10px;
		}
	}
}

.truck {
	//width: 600px;
	height: 350px;
	overflow-y: auto;
	padding: 20px;
}

::v-deep .el-timeline-item__node--normal {
	width: 28px;
	height: 28px;
	left: -8px;
	background: #1d84c6;

	::v-deep.el-timeline-item__icon {
		font-size: 20px;
	}
}
.num {
	font-weight: bold;
	font-size: 16px;
}
.text {
	font-weight: 400;
	font-size: 16px;
}
.content {
	padding-bottom: 31px;
	color: #333333;
	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.content-info {
		display: flex;
		padding: 11px 16px;
		border: 1px dashed #cccccc;
		border-radius: 10px;
		margin-top: 16px;

		.info2 {
			padding-left: 23px;
			position: relative;
		}

		.info {
			width: 33.33%;
			> div {
				padding: 5px 0;
			}
		}
	}
}
</style>
